<script setup lang="ts">
import { ref, computed, unref, MaybeRef } from "vue"
import {
  Button,
  RestSelectFormatter,
  RestFilter,
  Filter,
  SearchDataSource,
  RestTable,
  ClosuredDataSource,
  ListView,
} from "@purchasing/components"
import api from "@/api"
import { TableColumnType } from "ant-design-vue"
import ExportButton from "@/components/ExportButton.vue"
interface PaginationParams {
  page: number
  size: number
  sort?: string[]
}

// 使用关键字查询数据
const getSelectOptions: SearchDataSource = (
  params: MaybeRef<{ keyword: string }>,
  pagination: MaybeRef<PaginationParams>,
) => {
  return api.useGetResources(
    computed(() => ({ keyword: unref(params).keyword })),
    pagination,
  )
}

// 将返回的数据格式化为选项
const formatSelectOptions: RestSelectFormatter = (item: any) => ({
  label: item.property1!,
  value: item.property2!,
})

// 查询参数
const searchParams = ref<any>({})

const paginationParams = ref<PaginationParams>({ page: 1, size: 10 })

const filters: Filter<any>[] = [
  { key: 1, label: "参数1", prop: "prop1", type: "input" },
  {
    key: 2,
    label: "参数2",
    prop: "prop2",
    type: "select",
    options: [
      { label: "选项1", value: "option1" },
      { label: "选项2", value: "option2" },
    ],
  },
  {
    key: 3,
    label: "参数3",
    prop: "prop3",
    type: "select",
    options: { datasource: getSelectOptions, formatter: formatSelectOptions },
  },
  {
    key: 4,
    span: 2,
    label: "参数4",
    prop: "prop4",
    type: "range-picker",
    options: {},
  },
  {
    key: 5,
    span: 1,
    label: "参数5",
    prop: "prop5",
    type: "range",
  },
]

const restTable = ref()
function onSearch() {
  paginationParams.value.page = 1
  restTable.value.refresh()
}

// 表格定义
type TableColumn = TableColumnType & { description?: string }
const columns: TableColumn[] = [
  { key: "id", title: "序号", dataIndex: "id" },
  { key: "property1", title: "属性1", dataIndex: "property1" },
  {
    key: "property2",
    title: "属性2",
    dataIndex: "property2",
    description: "设置描述",
  },
  {
    key: "action",
    title: "操作",
    dataIndex: "action",
  },
]

// 取数接口
const getResources: ClosuredDataSource = () => {
  return api.useGetResources(searchParams, paginationParams)
}
</script>

<template>
  <div class="pc-bg-[#c9cdd4] pc-p-4 pc-h-full">
    <ListView>
      <template #filter>
        <RestFilter v-model="searchParams" :filters="filters">
          <template #default>
            <Button type="secondary" @click="onSearch">查询</Button>
          </template>
        </RestFilter>
      </template>
      <template #result>
        <RestTable
          ref="restTable"
          v-model:pagination="paginationParams"
          :columns="columns"
          rowKey="id"
          :datasource="getResources"
          :scroll="{ x: 1200, y: 240}"
        >
          <template #operations>
            <ExportButton
              url="/resource"
              :params="searchParams"
              :columns="columns"
            />
            <Button>操作</Button>
          </template>
          <template #settings>
            <Button type="text">字段设置</Button>
            <Button type="text">导出设置</Button>
          </template>
          <template #bodyCell="{ column }">
            <span v-if="column.dataIndex === 'action'">
              <Button type="link">查看</Button>
            </span>
          </template>
        </RestTable>
      </template>
    </ListView>
  </div>
</template>
